import animations from "create-keyframe-animation";
export default {
  methods: {
    startAni(done) {
      // 唱片动画
      {
        let { x, y, scale } = this.getImgXY();
        const animation = {
          0: {
            transform: `translate(${x}px, ${y}px) scale(${scale})`,
          },
          60: {
            transform: "translate(0, 0) scale(1.1)",
          },
          100: {
            transform: "translate(0, 0) scale(1)",
          },
        };
        animations.registerAnimation({
          name: "cd-in-ani",
          animation,
          presets: {
            duration: 500,
            easing: "linear",
          },
        });
        animations.runAnimation(this.$refs.img, "cd-in-ani", done);
      }
      // 头部弹出动画
      {
        const animation = {
          0: {
            transform: `translateY(-100%)`,
          },
          100: {
            transform: "translateY(0)",
          },
        };
        animations.registerAnimation({
          name: "header-slide-down",
          animation,
          presets: {
            duration: 500,
            easing: "cubic-bezier(.98,.22,.42,1.53)",
          },
        });
        animations.runAnimation(this.$refs.header, "header-slide-down");
      }
      // 底部弹出动画
      {
        const animation = {
          0: {
            transform: "translateY(100%)",
          },
          100: {
            transform: "translateY(0)",
          },
        };
        animations.registerAnimation({
          name: "footer-slide-up",
          animation,
          presets: {
            duration: 500,
            easing: "cubic-bezier(.98,.22,.42,1.53)",
          },
        });
        animations.runAnimation(this.$refs.footer, "footer-slide-up");
      }
    },
    afterStartAni(){
      animations.unregisterAnimation("cd-in-ani");
      animations.unregisterAnimation("header-slide-down");
      animations.unregisterAnimation("footer-slide-up");
      this.$refs.img.style.animation = "";
      this.$refs.header.style.animation = "";
      this.$refs.footer.style.animation = "";
    },
    endAni(done) {
      // 唱片离开动画
      {
        let { x, y, scale } = this.getImgXY();
        const animation = {
          0: {
            transform: "translate(0, 0) scale(1)",
          },
          60: {
            transform: "translate(0, 0) scale(1.1)",
          },
          100: {
            transform: `translate(${x}px, ${y}px) scale(${scale})`,
          },
        };
        animations.registerAnimation({
          name: "cd-out-ani",
          animation,
          presets: {
            duration: 300,
            easing: "linear",
          },
        });
        animations.runAnimation(this.$refs.img, "cd-out-ani", done);
      }
      // 头部弹出动画
      {
        const animation = {
          0: {
            transform: `translateY(0)`,
          },
          100: {
            transform: "translateY(-100%)",
          },
        };
        animations.registerAnimation({
          name: "header-slide-up",
          animation,
          presets: {
            duration: 300,
            easing: "cubic-bezier(.98,.22,.42,1.53)",
          },
        });
        animations.runAnimation(this.$refs.header, "header-slide-up");
      }
      // 底部弹出动画
      {
        const animation = {
          0: {
            transform: "translateY(0)",
          },
          100: {
            transform: "translateY(100%)",
          },
        };
        animations.registerAnimation({
          name: "footer-slide-down",
          animation,
          presets: {
            duration: 300,
            easing: "cubic-bezier(.98,.22,.42,1.53)",
          },
        });
        animations.runAnimation(this.$refs.footer, "footer-slide-down");
      }
    },
  },
};
